<template>
    <div class="listing_content">
        <div class="left_tree">
            <div class="title_tree title_tree_defult" @click="switchState('on')">{{msg}}</div>
            <div class="search">
                <input
                    type="text"
                    name="filename"
                    placeholder="请输入关键字"
                    @keydown="showBox($event)"
                    @blur="hideAll"
                    autocomplete="off"
                    v-model="type"
                />
                <input type="submit" value="">
                <div class="search_scroller" v-show="searchscroller">
                    <!--<v-bar-->
                    <!--wrapper="wrappers"-->
                    <!--vBar=""-->
                    <!--vBarInternal=""-->
                    <!--hBar="auto"-->
                    <!--hBarInternal=""-->
                    <!--ref="scroll"-->
                    <!--&gt;-->
                    <div class="scroller_warp" ref="wrap">


                        <ul>
                            <li v-if="shoValue">{{shoValue}}</li>
                            <li v-else>
                                ！没有找到数据
                            </li>

                        </ul>
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>工商</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                        <!--<ul>-->
                        <!--<li>文明办</li>-->
                        <!--<li>投诉与分析</li>-->
                        <!--</ul>-->
                    </div>
                    <!--</v-bar>-->
                </div>
            </div>
            <div class="file_lsit">
                <ul class="list_template">
                    <li class="files " :class="swichstate" v-for="(item,index) in modeData" :key="index"
                        @click.stop.prevent="toggles($event)">
                        {{item.designame}}
                        <ul v-if="item.childName.length !==0" ref="animate">
                            <li class="files" :class="swichstate" v-for="(it,index) in item.childName" :key="index"
                                @click.stop.prevent="toggles($event)">
                                {{it.DesigChildname}}
                                <ul v-if="it.fileText.length !==0" ref="animate">
                                    <li v-for="(te,index) in it.fileText" :key="index">
                                        {{te}}
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!--<li class="files files_disble">-->
                    <!--工商-->
                    <!--<ul>-->
                    <!--<li class="files files_disble">-->
                    <!--投诉分析AIC-->
                    <!--<ul>-->
                    <!--<li>-->
                    <!--投诉分析AIC-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li class="files files_disble">-->
                    <!--工商场景分析GOV-->
                    <!--<ul>-->
                    <!--<li>工商场景分析</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li class="files files_disble">-->
                    <!--工商-->
                    <!--<ul>-->
                    <!--<li class="files files_disble">-->
                    <!--投诉分析AIC-->
                    <!--<ul>-->
                    <!--<li>-->
                    <!--投诉分析AIC-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li class="files files_disble">-->
                    <!--工商场景分析GOV-->
                    <!--<ul>-->
                    <!--<li>工商场景分析</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li class="files files_disble">-->
                    <!--工商-->
                    <!--<ul>-->
                    <!--<li class="files files_disble">-->
                    <!--投诉分析AIC-->
                    <!--<ul>-->
                    <!--<li>-->
                    <!--投诉分析AIC-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--<li class="files files_disble">-->
                    <!--工商场景分析GOV-->
                    <!--<ul>-->
                    <!--<li>工商场景分析</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <div class="nav_crosswise">
            <div class="box-float">
            <span class="text-box">
           投诉分析
         </span>
         <span class="use_tps"
               :class="[labestate ? 'dis_template' : 'enble_template']"
               @mouseover="mouseTextstate('on')"
               @mouseout="mouseTextstate('off')"
               @click="alertbox">
           使用模板
         </span>
            </div>

        </div>
        <div class="container">
            <Canvase></Canvase>
        </div>
        <Layer @hiden="cenle" v-show="layehide"></Layer>
    </div>
</template>

<script>
    import $ from 'jquery'
    import VBar from 'v-bar'
    import {mapGetters} from 'vuex'
    import Layer from './components/poplayer.vue'
    import Canvase from './components/echartsCanvas.vue'
    export default{
        components: {
            VBar,
            Layer,
            Canvase
        },
        data(){
            return {
                type: '',
                wrappers: {
                    width: "100%",
                    height: "300px"
                },
                searchscroller: false,
                msg: '模板列表',
                swichstate: 'files_disble',
                modeData: [
                    {
                        designame: '文明办',
                        childName: [
                            {DesigChildname: '投诉分析Gov', fileText: ['投诉分析', '实时分析']},
                            {DesigChildname: '投诉分析AIC', fileText: ['投诉分析', '实时分析']}
                        ]
                    }, {
                        designame: '工商',
                        childName: [
                            {DesigChildname: '工商分析Gov', fileText: ['工商投诉分析', '实时分析']},
                            {DesigChildname: '工商分析AIC', fileText: ['工商投诉分析', '实时分析']}
                        ]
                    },
                    {
                        designame: '建设',
                        childName: [
                            {DesigChildname: '工商分析Gov', fileText: ['工商投诉分析', '实时分析']},
                            {DesigChildname: '工商分析AIC', fileText: ['工商投诉分析', '实时分析']}
                        ]
                    }
                ],
                layehide: false,
                labestate: false,

            }
        },
        methods: {
            toggles(evnet){
                evnet.stopPropagation()
                let ev = evnet.srcElement || evnet.target;
                //console.log($(ev))
                console.log($(ev).attr('class'))
                if (!$(ev).attr('class')) {
                    return
                }
                if ($(ev.childNodes[1]).is(":hidden")) {
                    $(ev.childNodes[1]).slideDown();
                    $(ev).removeClass('files_disble').addClass('files_enble')
                } else {
                    $(ev.childNodes[1]).slideUp();
                    $(ev).removeClass('files_enble').addClass('files_disble')
                }
            },
            switchState(params){
                if (params == 'on') {
                    this.swichstate = "files_enble"
                } else {
                    this.swichstate = "files_disble"
                }
            },
            showBox(event){

                this.searchscroller = true;

                this.$store.dispatch('getShoso', {keyValue: this.type})
//          const scrollbox = $(this.$refs.scroll)[0].$el;
//           const autoHeight = $(this.$refs.wrap).height()
//          if(autoHeight>300){
//            $(scrollbox).height(300)
//          }else{
//            $(scrollbox).height(autoHeight)
//          }
                // console.log(this.type)
            },
            hideAll(){
                //console.log('失去焦点')
                this.searchscroller = false;
            },
            cenle(b){
                if (b) {
                    this.layehide = false;
                }
            },
            alertbox(){
                this.layehide = true;
            },
            mouseTextstate(event){
                if (event === 'on') {
                    this.labestate = true;
                } else {
                    this.labestate = false;
                }
            }
        },
        watch: {
            swichstate(value){
                if (value == 'files_enble') {
                    $(this.$refs.animate).slideDown()
                } else {
                    $(this.$refs.animate).slideUp()
                }
            },
        },
        computed: {
            ...mapGetters({shoValue: 'getshosoValue'})
    }


    }

</script>
<style scoped>
    .listing_content {
        position: absolute;
        left: 70px;
        top: 73px;
        right: 0;
        bottom: 0;
        background: #eee;
    }

    .left_tree {
        width: 260px;
        background: #fff;
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .nav_crosswise {
        height: 70px;
        position: absolute;
        left: 260px;
        right: 0;
        background: #fff;

        /*background: -webkit-linear-gradient( 90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);*/
        /*background: -ms-linear-gradient( 90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);*/
    }

    .box-float {
        padding: 0 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 100%;

    }

    span.enble_template:before {
        content: "";
        display: block;
        width: 25px;
        height: 23px;
        background: url(/static/common/images/shiyongmb.png) no-repeat center;
        margin-bottom: 5px;

    }

    span.dis_template:before {
        content: "";
        display: block;
        width: 25px;
        height: 23px;
        background: url(/static/common/images/shiyongmb_on.png) no-repeat center;
        margin-bottom: 5px;
    }

    span.dis_template {
        color: #0066ff;
    }

    span.use_tps {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .box-float span.text-box {
        font-size: 24px;
    }

    .container {
        position: absolute;
        top: 70px;
        left: 260px;
        right: 0;
        bottom: 0;
    }

    .title_tree_defult:after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 17px;
        background: url(/static/common/images/zhankaisq.png) no-repeat center;
    }

    .title_tree_act:after {
        content: "";
        display: inline-block;
        width: 21px;
        height: 17px;
    }

    .title_tree {
        padding: 14px 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 18px;
        align-items: center;
    }

    .search {
        padding: 8px 14px 8px 14px;
        position: relative;
    }

    .search input[type="text"] {
        width: 100%;
        padding: 6px 6px;
        border: 1px solid rgb(221, 221, 221);
        border-radius: 3px;
        /*display:flex;*/
        /*justify-content: space-between;*/
        /*align-items: center;*/
    }

    .search input[type="submit"] {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(/static/common/images/sousuo.png) no-repeat center;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .file_lsit {
        height: 100%;
        padding: 0 15px;
    }

    ul.list_template li.files_disble:before {
        content: "";
        width: 16px;
        height: 14px;
        display: inline-block;
        margin-right: 5px;
        background: url(/static/common/images/wenjianjia_1.png) no-repeat center;

    }

    ul.list_template li {
        font-size: 14px;
    }

    ul.list_template > li {
        padding: 5px 0;

    }

    ul.list_template > li > ul {
        margin-top: 10px;
    }

    ul.list_template li.files_enble:before {
        content: "";
        width: 16px;
        height: 14px;
        display: inline-block;
        margin-right: 5px;
        background: url(/static/common/images/wenjianjia_2.png) no-repeat center;
    }

    ul.list_template li ul {
        display: none;
        padding-left: 25px;
    }

    ul.list_template li ul li {
        margin: 7px 0;
    }

    ul.list_template > li > ul > li:last-child {
        padding-bottom: 0;
    }

    .search_scroller {
        position: absolute;
        left: 14px;
        top: 50px;
        right: 14px;
        background: #fff;
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid #ccc;
        border-radius: 3px;
        /*width:100%;*/
        max-height: 300px;
        height: auto;
        overflow: hidden;

    }

    .scroller_warp {
        padding: 10px;
    }

    .wrappers {
        width: 100%;
        height: 300px;
    }
</style>
